<template>
  <el-card>
    <menu-nav :list="navList"></menu-nav>

    <div class='app-container'>
      <div class='tip-div' v-if="user_exam_info.page_tip_enable=='enabled'">
        <div class='tip-content' >
          <div style="white-space: pre-line;" v-html="user_exam_info.page_tip"></div>
        </div>

      </div>
      <div class="topping_warpper">
        <ul class="topping_con">

          <li class="priceColor_con">
            <span class="margin">考试名称</span>
            <span class="readonlyColor">{{user_exam_info.examname}}{{form.examid}}</span>
          </li>
          <li class="priceColor_con">
            <span class="margin">报考单位</span>
            <span class="readonlyColor">{{user_exam_info.unitname}}{{form.unitid}}</span>
          </li>
          <li class="priceColor_con">
            <span class="margin">报考岗位</span>
            <span class="readonlyColor">{{user_exam_info.careername}}{{form.careerid}}</span>
          </li>
          <li class="priceColor_con">
            <span class="margin">应付金额</span>
            <span class="priceColor">{{user_exam_info.fee}}</span>元
          </li>
          <li class="payment_type">
            <span class="margin">支付方式</span>
            <Payment @choosePayment="choosePayment"></Payment>
          </li>

          <li class="btn">
            <el-button type="primary" :disabled='user_exam_info.pay_enable == "disabled"' @click="submit">{{ user_exam_info.pay_enable_txt ? user_exam_info.pay_enable_txt : "立即支付" }}</el-button>
          </li>
        </ul>
      </div>


      <PaySubmit ref="paySubmit" :showWaiting="true" :payment="submitData.payment" successUrl="/personal/kaowu/order" failUrl="/personal/kaowu/order"></PaySubmit>

    </div>
  </el-card>

</template>

<script>
import {formatTime} from '@/utils/index'
// import http from '@/utils/http'
import api from '@/api_kaowu'
import PaySubmit from "@/components/kaowu/service/PaySubmit";
import Payment from "@/components/kaowu/service/Payment";
  export default {
    name: 'Userinfo',
    props:['user_exam_info'],
    components:{
      PaySubmit,
      Payment
    },
    filters: {
        timeFilter(timestamp) {
        return formatTime(timestamp, '{y}-{m}-{d} {h}:{i}', true)
        },
    },
    data () {
      return {
          navList: [
            { label: '网上缴费', href: '/personal/kaowu/pay', name: '/personal/kaowu/pay', active: true },
          ],
          form: {
             examid:0,
             unitid:0,
             careerid:0,
          },
          dataset:[],
          old_amount: 0.0,
          amount: 0.0,
          is_deduct: false,
          enable_points_deduct: 0,
          enable_points_deduct_points: 0,
          enable_points_deduct_expense: 0.0,
          after_deduct_expense: 0.0,
          submitData: {
            service_type: 'kaowu',
            service_id: 0,
            deduct_points: 0,
            payment: 'alipay',
            tag_text: ''
          },
          custom_tag_text:'',
          sel_tag_id:0,
          showCustomTag: false,


      }
    },
    computed: {
        basic () {
            return this.$store.state.resume.basic
        }
    },
   created () {
      this.init()
    },
    methods:{
        submit () {
          this.submitData.deduct_points = this.is_deduct
            ? this.enable_points_deduct_points
            : 0
          this.submitData.service_id = this.user_exam_info.exam_id

          this.submitData.return_url =
            window.location.protocol +
            '//' +
            window.location.host +
            '/'+this.$store.state.config.member_dirname+'/personal/kaowu/order'

            this.user_exam_info.pay_enable = 'disabled';
          this.$refs.paySubmit.handlerSubmit(api.kaoShiPay,this.submitData)
        },
        // onSubmit() {
        //   const insertData = { ...this.form }
        //   http.post(api.doPay,insertData)
        //       .then(res => {
        //         this.$message.success(res.message)

        //       })
        //       .catch(err => {
        //           console.log(err)
        //       })

        // },
        // 初始化数据
        init() {
            this.form.examid = this.user_exam_info.exam_id
            this.form.unitid= this.user_exam_info.unit_id
            this.form.careerid = this.user_exam_info.career_id
        },
        choosePayment (payment) {
          this.submitData.payment = payment
        },


    }
  }
</script>

<style lang="scss" scoped>
  .tip-div{padding:15px;background-color: #fafafa;width: 100%;min-height: 80px;line-height:20px;border-left:5px solid red;margin-bottom:30px;}
  .input-hidden {
        position: absolute;
    }
    .tip-content{
      white-space:pre-wrap;
      color:red;
      font-size:16px;
      line-height:24px;
    }
  .app-container{background:#fff;overflow:auto;}
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }


    .topping_con li{
      margin-bottom: 25px;
    }
    .topping_con .margin{
      margin-right: 15px;
    }
    .service{
      display: flex;
    }
    .service_list{
      display: flex;
      flex-wrap: wrap;
      flex: 9;
    }
    .service_list>div{
      width:360px ;
      height:78px ;
      border: 1px solid #eeeeee;
      margin-right: 20px;
      margin-bottom: 14px;
      display: flex;
      cursor:pointer;
    }
    .item_left{
      flex: 2;
      margin-left: 20px;
    }
    .item_left .service_name{
      position:relative;
      color: #333333;
      font-size: 16px;
    }
    .item_left .service_name .recommend{
      position:absolute;
      top:-10px;
      right:-40px;
    }
    .item_left p{
      margin: 10px 0 8px;
    }
    .item_left span{
      font-size:13px ;
      color: #a9a9a9;
    }
    .item_right{
      flex: 1;
      display: flex;
    }
    .item_right strong{
      height:34px ;
      display: inline-block;
      border: 1px dashed #e2e2e2;
      margin-top: 20px;
      margin-right: 18px;
    }
    .item_right span{
      display: inline-block;
      line-height: 78px;
    }

    .service_list .hoverbg{
      position: relative;
      &:hover {
        border:1px solid #dab577 ;
      }

    }
    .service_list .border2{
      border:1px solid #dab577 ;
       background:#fffcf5 ;
    }
    .hoverbg i{
      border-left:10px solid  transparent;
      border-right:10px solid  #dab577;
      border-top:10px solid  #dab577;
      border-bottom:10px solid  transparent;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      display: inline-block;
      color: #fff2ea;
      position: absolute;
      right: 0;
      top: 0;
      line-height: 0px;
    }
    .hoverbg i::before{
      width: 14px;
      position: absolute;
      right: -12px;
      top:-4px;
    }

    .payment_type{
      display: flex;
      line-height: 44px;
    }
    .priceColor{
      color: #ff7c60;
      font-size: 15px;
      font-weight: bold;
    }
    .readonlyColor{
      color:#409eff;
    }

    .btn{
      margin-left: 78px;
    }
    .btn .el-button{
      width:260px ;
      height: 46px;
      margin-top: 25px;
    }
    .tag-item{
      margin-right:10px;
      cursor:pointer;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
</style>
